<template>
  <div class="header">
    <div class="top-bar">
      <div class="w990 clearfix">
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
            <div class="grid-content bg-purple top-l">
              <a href="#" class="link">学生</a> |
              <a href="#" class="link">学生</a> |
              <a href="#" class="link">学生</a> |
              <a href="#" class="link">学生</a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="top-bottom">
      <div class="w990p10 clearfix">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple logo">
              <router-link to="/" >
                <img src="./logo1.png" alt="..." />
              </router-link>
              <a href="#" class="link others-pic"></a>
            </div>

            <div class="search">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="formInline.user" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" class="search-btn">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>

          <el-col :span="24" class="nav">
            <el-menu :default-active="navActive" class="el-menu-demo nav-wrap" mode="horizontal">
              <el-menu-item index="0">
                <router-link to="/">首页</router-link>
              </el-menu-item>

              <el-menu-item v-for="(item, index) in navList" :key="item.asd" :index="(index + 1).toString()" @click="selectCloumn(item)">
                {{ item.conten }}
              </el-menu-item>

            </el-menu>

            <div class="hide">
              <div class="hide-menu">
                <span>快速导航</span>
                <div class="s-h">
                  <i class="line top"></i>
                  <i class="line middle"></i>
                  <i class="line bottom"></i>
                </div>
              </div>

              <div class="down-box">
                <router-link to="/" class="link">
                  首页
                </router-link>
                <router-link to="/" class="link">
                  学院概况
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
                <router-link to="/"" class="link">
                  重点实验室
                </router-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="progress-wrap">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import $ from 'jquery'
  import {mapMutations} from 'vuex'

  export default {
    props: {
      navList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        navActive: '0',
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    created() {
      this.bindEvent()
    },
    methods: {
      selectCloumn(item) {
        this.$router.push({path:`/${item.n_id}`})
        this.setCol(item)
        return false
      },
      bindEvent() {
        $(function () {
          $('.s-h').click(function () {
            if (!this.isActive) {
              $(this).addClass('active')
              $('.down-box').addClass('active')
              this.isActive = true
            } else {
              $(this).removeClass('active')
              $('.down-box').removeClass('active')
              this.isActive = false
            }
          })
        })
      },
      onSubmit() {
        console.log('submit!')
      },
      ...mapMutations({
        'setCol': 'SET_CURRENTCOLUMN' 
      })
    },
    watch: {

    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .header
    .top-bar
      background-color: $back
      .w990
        hh(30px)
        color: #ccc
        a.link
          margin: 0 7px
          &:first-child
            margin-left: 0;
          &:last-child
            margin-right: 0;
        .top-l
          ltp(0, 0)
        .top-r
          rtp(0, 0)
    .top-bottom
      background-color: #fff
      .w990p10
        .el-form--inline .el-form-item
          margin-right: 0
        .search
          rtp(0, 40px)
          .search-btn
            position: relative
            top: -1px
        .logo
          font-size: 0
          overflow: hidden
          img
            margin: 11px 0
        .nav
          position: relative
          wh(100%, 60px)
          box-shadow: 0 0 10px 1px #dcdcdc
          br(4px 4px 0 0)
          .hide-menu
            ltp(0, 0)
            wh(100%, 100%)
            sc($font-large, $back)
            span
              ltp(0, 0)
              padding: 0 10px
              line-height: 60px
            .s-h
              rtp(10px, 0)
              wh(60px, 60px)
              cursor: pointer;
              .line
                position: absolute
                left: 10px
                width: 40px
                height: 3px
                background-color: $vice-color
                transition: .4s ease
                &.top
                  top: 19px
                &.middle
                  top: 29px
                &.bottom
                  top: 39px
              &.active
                .line
                  &.middle
                    display: none
                  &.top
                    top: 33px
                    transform: rotate(45deg)
                  &.bottom
                    top: 33px
                    transform: rotate(-45deg)
          .down-box
            display: none
            rtp(0, 60px)
            z-index: 100
            wh(728px, auto)
            padding: 20px
            background-color: rgba(0, 0, 0, .8)
            border-radius: 0 0 10px 10px
            .link
              display: block
              wh(100%, 44px)
              line-height: 44px
              border-bottom: 1px solid $vice-color
              sc($font-small-x, $vice-color)
              text-align: center
            &.active
              display: block
          .nav-wrap
            display: flex
            -webkit-justify-content: space-between
            justify-content: space-between
            a
              display: block

</style>
